<template>
  <div>
    <el-button type="warning" plain icon="el-icon-truck" size="mini"  :disabled="multiple" @click="open"
      v-hasPermi="['tms:order:edit']">派车</el-button>
    <el-drawer  title="派车安排"  :visible.sync="show"  :before-close="handleClose" size="60%">
      <el-container class="main_container">
         <el-main>
           <el-form ref="form" :model="form" :rules="rules" label-width="80px">
             <el-card class="mb10">
               <div slot="header" class="clearfix">
                 <span>车辆安排</span>
               </div>
               <el-row>
                 <el-col :span="12">
                   <el-form-item label="车辆" prop="carId">
                     <el-select v-model="form.carId">
                       <el-option v-for="item in carOptions" :label="item.carNumber" :key="item.id" :value="item.id"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
                 <el-col :span="12">
                   <el-form-item label="司机" prop="pickupId">
                     <el-select v-model="form.pickupId">
                       <el-option v-for="item in driverOptions" :label="item.nickName" :key="item.userId" :value="item.userId"></el-option>
                     </el-select>
                   </el-form-item>
                 </el-col>
               </el-row>
             </el-card>
             <el-card>
               <div slot="header" class="clearfix">
                 <span>订单信息</span>
                 <span style="float: right; padding: 3px 0;color: #409EFF;font-size: 14px;">请选择配送地址</span>
               </div>
               <el-descriptions direction="horizontal" :column="4" border>
                 <template v-for="item in form.ordersItems">
                   <el-descriptions-item>
                     <div slot="label" style="text-align: center;">
                       <el-checkbox v-model="item.checked" @change="checkboxChange($event,item)"></el-checkbox>
                     </div>
                      {{item.orderNo}}
                   </el-descriptions-item>
                   <el-descriptions-item label="收件人">{{item.takeContacts}}</el-descriptions-item>
                   <el-descriptions-item label="联系电话">{{item.takeTel}}</el-descriptions-item>
                   <el-descriptions-item label="收件地址">{{item.takeAddr}}</el-descriptions-item>
                 </template>
               </el-descriptions>
             </el-card>
           </el-form>
         </el-main>
         <el-footer>
           <div class="footerDivClass">
             <el-button :loading="buttonLoading" type="primary" @click="submit">派 遣</el-button>
             <el-button @click="handleClose()">取 消</el-button>
           </div>
         </el-footer>
      </el-container>
    </el-drawer>
  </div>
</template>

<script>
  import {listCar} from '@/api/tms/car';
  import {getDispatchOrder,getCarrierUser,againDispatch} from '@/api/tms/dispatch'
  export default {
     props:{
       multiple:{
         type:[String,Boolean]
       },
       ids:{
         type:[Array]
       }
     },
     data(){
       return{
         show:false,

         carOptions:[],
         driverOptions:[],
         orderOptions:[],

         buttonLoading:false,
         loading:false,

         form:{
           carId:undefined,
           pickupId:undefined,
           orderId:undefined,
           orderDtlItems:[]
         },
         rules: {
           carId: [{
             required: true,
             message: "车辆不能为空",
             trigger: "blur"
           }],
           pickupId: [{
             required: true,
             message: "司机不能为空",
             trigger: "blur"
           }],
         },
       }
     },
     watch:{
       'form.carId':{
         handler(newVal){
           if(newVal){
             this.carOptions.forEach(item=>{
               if(item.id == newVal){
                 this.form.carNumber = item.carNumber;
               }
             })
           }
         }
       }
     },
     methods:{
       open(){
         this.show = true;

         getDispatchOrder(this.ids).then(response=>{
           this.form = response.data;
           this.getCar();
           this.getDriver();
         })
       },
       getCar(){
         listCar().then(response=>{
           this.carOptions = response.rows;
         })
       },
       getDriver(){
         getCarrierUser().then(response=>{
           this.driverOptions = response.data;
         })
       },
       handleClose(){
         this.show = false;
       },
       checkboxChange(flag,item){
         this.form.ordersItems.forEach(data=>{
           data.checked = false;
         })
         item.checked = flag;
         this.form.orderId = item.id;
       },
       submit(){

         this.$refs["form"].validate(valid=>{
           if(valid){
             if(!this.form.orderId){
               this.$modal.msg("请选择配送地址！");
               return false;
             }
             againDispatch(this.form).then(response=>{
                this.handleClose();
                this.$modal.msgSuccess("派车成功");
             })
           }
         })
       }
     }
  }
</script>

<style>
</style>
